<!-- Created by henian.xu on 2021/7/10. -->

<template>
  <Page>
    <Container v-if="hasWon" class="gift-detail-page">
      <Logo></Logo>
      <div class="page-content">
        <div class="page-title"></div>
        <div class="postcard"></div>

        <div class="form-wrap">
          <div class="item">
            <div class="icon">
              <img src="@/assets/images/consignee-icon.png" alt="icon" />
            </div>
            <div class="label">收件人:</div>
            <div v-if="isFilledIn" class="input entered">
              <span>{{ userInfo.name }}</span>
            </div>
            <div v-else class="input">
              <input
                type="text"
                placeholder="请输入"
                v-model="formModel.name"
              />
            </div>
          </div>
          <div class="item">
            <div class="icon">
              <img src="@/assets/images/mobile-icon.png" alt="icon" />
            </div>
            <div class="label">手机号:</div>
            <div v-if="isFilledIn" class="input entered">
              <span>{{ userInfo.phone }}</span>
            </div>
            <div v-else class="input">
              <input
                type="text"
                placeholder="请输入"
                v-model="formModel.phone"
              />
            </div>
          </div>
          <div class="item">
            <div class="icon">
              <img src="@/assets/images/address-icon.png" alt="icon" />
            </div>
            <div class="label">地址:</div>
            <div v-if="isFilledIn" class="input entered">
              <span>{{ userInfo.address }}</span>
            </div>
            <div v-else class="input">
              <textarea
                rows="3"
                placeholder="请输入"
                v-model="formModel.address"
              ></textarea>
            </div>
          </div>

          <div
            v-if="!isFilledIn"
            class="submit-btn"
            @click="
              () => {
                onAddUserInfo();
              }
            "
          ></div>
        </div>
      </div>
    </Container>
  </Page>
</template>

<script>
import { GlobalVar } from '../utils/GlobalVar';
import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'giftDetailPage',
  data() {
    return {
      formModel: {
        name: GlobalVar.isDev ? 'xhn' : '',
        phone: GlobalVar.isDev ? '18060082532' : '',
        address: GlobalVar.isDev ? '就在这里' : '',
      },
    };
  },
  computed: {
    ...mapGetters('initInfo', [
      'initInfo',
      'drawStatus',
      'userInfo',
      // add
    ]),
    hasWon() {
      return this.drawStatus === 2;
    },
    isFilledIn() {
      const { hasWon, userInfo } = this;
      return hasWon && userInfo.id;
    },
  },
  methods: {
    ...mapActions('initInfo', {
      initInfoUpdate: 'update',
    }),
    async onAddUserInfo() {
      console.log('onAddUserInfo');
      const { formModel } = this;
      if (!formModel.name) {
        return this.$messageBox.tips('收件人不能为空');
      }
      if (!formModel.phone) {
        return this.$messageBox.tips('手机号不能为空');
      }
      if (!/^1\d{10}$/.test(formModel.phone)) {
        return this.$messageBox.tips('手机号格式不确定');
      }
      if (!formModel.address) {
        return this.$messageBox.tips('地址不能为空');
      }
      const { error_msg } = await this.$http.post(
        '/api/dell_summer21_draw/addUserinfo',
        formModel,
      );
      await this.initInfoUpdate();
      if (error_msg) this.$messageBox.tips(error_msg);
    },
  },
};
</script>

<style lang="scss">
.gift-detail-page {
  background: transparent url('~@/assets/images/kv-bg2.png') center top
    no-repeat;
  background-size: 100% auto;

  .page-content {
    padding: $padding * 3;
    > .page-title {
      margin: $margin * 2 auto;
      background: transparent url('~@/assets/images/winning-title.png') center
        top no-repeat;
      background-size: cover;
      width: 539px;
      height: 131px;
    }
    > .postcard {
      margin: $margin * 2 auto;
      background: transparent url('~@/assets/images/postcard.png') center top
        no-repeat;
      background-size: cover;
      width: 179px;
      height: 264px;
    }

    > .form-wrap {
      width: 100%;
      margin-top: $margin;
      > .item {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        padding: $padding 0;

        > .icon {
          flex: 0 0 auto;
          > img {
            width: 52px;
            height: 52px;
          }
        }
        > .label {
          flex: 0 0 auto;
          width: 5em;
          padding: 0 $padding;
          line-height: 52px;
        }
        > .input {
          flex: 1 1 1%;
          line-height: 52px;

          border: 2px solid #333;
          border-radius: $padding;
          padding: $padding-small $padding;
          background-color: #fff;

          box-shadow: 0 8px 0 -1px #fff, 0 8px 0 0 #333;

          > input,
          > textarea {
            width: 100%;
            appearance: none;
            background-color: transparent;
            outline: none;
          }

          &.entered {
            background: #ffa32c;
          }
        }
      }

      > .submit-btn {
        background: transparent url('~@/assets/images/submit-btn.png') left top
          repeat;
        width: 282px;
        height: 82px;
        margin: $margin-big auto 0 auto;
        background-size: cover;
      }
    }
  }
}
</style>
